<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>随机文本弹窗</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>随机文本弹窗</h1>

    <section class="controls">
      <label>文本（每行一条）：
        <textarea id="texts" placeholder="在此处输入多条文本，每行一条。示例：\n你好！\n今天好心情！\n记得喝水～"></textarea>
      </label>

      <div class="row file-actions">
        <button id="importBtn" class="file-btn">📁 导入JSON文件</button>
        <button id="exportBtn" class="file-btn">💾 导出为JSON</button>
        <button id="parseJsonBtn" class="file-btn">📋 解析JSON格式</button>
        <input type="file" id="fileInput" accept=".json" style="display:none" />
      </div>

      <div class="row">
        <label>背景色： <input id="bgColor" type="color" value="#ffd966" /></label>
        <label>文字色： <input id="textColor" type="color" value="#000000" /></label>
        <label>字体大小： <input id="fontSize" type="number" min="12" max="72" value="20" /> px</label>
        <label>自动隐藏（秒）： <input id="autoHide" type="number" min="0.5" max="20" step="0.5" value="10" /></label>
      </div>

      <div class="row">
        <label><input type="checkbox" id="randomPos" checked /> 随机位置</label>
        <label><input type="checkbox" id="randomColor" checked /> 随机颜色</label>
        <label><input type="checkbox" id="randomSize" /> 随机大小</label>
        <label>弹窗数量： <input id="popupCount" type="number" min="1" max="100" value="50" /></label>
        <label>间隔（秒）： <input id="interval" type="number" min="0.1" max="5" step="0.1" value="0.3" /></label>
      </div>

      <div class="row trajectory-row">
        <label>弹窗轨迹：
          <select id="trajectory">
            <option value="random">🎲 随机位置</option>
            <option value="top-to-bottom">⬇️ 从上到下</option>
            <option value="left-to-right">➡️ 从左到右</option>
            <option value="diagonal">↘️ 对角线</option>
            <option value="circle">⭕ 圆形轨迹</option>
            <option value="heart">❤️ 心形轨迹</option>
            <option value="spiral">🌀 螺旋轨迹</option>
            <option value="wave">🌊 波浪轨迹</option>
            <option value="center-out">💥 中心扩散</option>
            <option value="corners">📐 四角依次</option>
          </select>
        </label>
      </div>

      <div class="buttons">
        <button id="showBtn">随机弹出单个</button>
        <button id="burstBtn" class="primary">依次弹出多个 🎉</button>
        <button id="stopBtn" class="danger">停止弹出</button>
        <button id="clearAllBtn">关闭所有弹窗</button>
      </div>

      <p class="hint">💡 提示：点击"依次弹出多个"会按设置的数量和间隔依次弹出随机弹窗！</p>
      <p class="hint">🎯 轨迹模式：选择轨迹后会自动禁用"随机位置"，弹窗将按所选轨迹依次出现！</p>
      <p class="hint">📄 JSON格式：<code>["文本1", "文本2", ...]</code> 或 <code>{"message": ["文本1", "文本2"]}</code></p>
    </section>
  </div>

  <!-- 弹窗容器 -->
  <div id="popupContainer"></div>

  <script src="script.js"></script>
</body>
</html>